<template>
  <view class="cat-section">
    <scroll-view class="scroll-container" scroll-x :scroll-with-animation="items.length > 5">
      <view class="inner-container" :class="{ 'space-between': items.length <= 5 }">
        <view class="item" v-for="(item, index) in items" :key="index" @click="navigateTo(item.url)">
          <image class="icon" :src="item.icon" mode="widthFix" />
          <text class="name">{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				required: true
			}
		},
		methods: {
			navigateTo(url) {
				console.log("跳转到"+url)
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style>
	.cat-section {
		width: 100%;
		margin-top: 10px;
	}

	.scroll-container {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		padding: 0 10px;
		/* 调整滚动容器的 padding */
	}

	.inner-container {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
	}

	.space-between {
		justify-content: space-between;
		/* 等距排列 */
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 60px;
		/* 调整宽度以适应布局 */
		margin-right: 10px;
		cursor: pointer;
	}

	.icon {
		width: 50px;
		height: 50px;
	}

	.name {
		margin-top: 5px;
		font-size: 14px;
		text-align: center;
	}
</style>